<template>
    <div class="material-review-examination"  :key="materialReviewExaminationKey">
        <div class="material-review-tabs" v-if="!currentRow.isTopTabs">
            <a-tabs type="card" v-model:activeKey="activeKey" @change="tabPaneChange">
                <a-tab-pane key="材料审查" tab="材料审查"></a-tab-pane>
                <a-tab-pane key="申请信息" tab="事项信息"></a-tab-pane>
                <a-tab-pane key="环节流转记录" tab="流转记录"></a-tab-pane>
            </a-tabs>
        </div>
        <div class="material-review-content" 
        :style="{height: currentRow.isTopTabs?'calc(100vh - '+(currentRow.heightNum?currentRow.heightNum:206)+'px)':'calc(100vh - '+210+'px)',marginTop:currentRow.isTopTabs?'0':'10px'}"
        >
            <div v-show="activeKey == '材料审查'">
                <a-spin size="large" :spinning="spinning" :key="spinningKey">
                    <div style="display: flex;">
                        <div class="review-table" :key="directoryKey" v-if="directoryList.length" style="width: 45%;overflow-y: auto;" 
                        :style="{height: currentRow.isTopTabs?'calc(100vh - '+(150 + currentRow.reserveBottom)+'px)':'calc(100vh - '+145+'px)',boxShadow:currentRow.isTopTabs?'': '0px 0px 12px 0px #5ca3e5'}">
                            <table border bordercolor="#d9d9d9" style="width: 100%; " >
                                <tr>
                                    <th>材料目录/接收、补正材料</th>
                                    <!-- <th style="min-width:150px;" v-if="isFcljsqh">补正材料</th> -->
                                    <th>技术审查情况</th>
                                </tr>
                                <tr v-for="(item,index) in directoryList" :key="index" class="file-list-v-examination">
                                    <td style="width: 50%;">
                                        <a-tooltip placement="topRight">
                                            <template slot="title">
                                            <span>{{ item.ml.fmlmc }}</span>
                                            </template>
                                            <span class="directory-list-fmlmc">{{ item.ml.fmlmc }}</span>
                                        </a-tooltip>
                                        <div class="file-for-box">
                                            <div class="file-for-v-1" v-for="(trem,tIndex) in item.wjList" :key="tIndex"
                                             :class="('item'+iframeData.index+'trem'+iframeData.tIndex) == ('item'+index+'trem'+tIndex)?'select-file-list-examination':''" 
                                             @click="getDirectoryItem({index,tIndex})"
                                             >
                                                <span
                                                    v-if="trem.fcljsqh == '1'"
                                                    style="
                                                    padding: 0 3px;
                                                    color: #fff;
                                                    background: #ff9200;
                                                    border-radius: 3px;
                                                    "
                                                >补正</span>
                                                <span
                                                    style="padding: 0 3px;color: #fff;background: #18d118;border-radius: 3px;"
                                                    :style="{background:trem.fydzt=='已读'?'#18d118':'red'}"
                                                >{{ trem.fydzt }}</span>
                                                <a  class="name-fclmc-text">{{ trem.fclmc }}</a>
                                                <!-- @click="downloadClick(trem)" -->
                                                <!-- <a-icon style="padding: 0 3px;" class="eye-icon-v" type="eye" @click="fetchAndAddWatermark(trem)" v-if="trem.fclmc.indexOf('.pdf') !== -1"/> -->
                                            </div>
                                        </div>
                                    </td>
                                    <td style="text-align: center;">
                                        <div v-if="!currentRow.isDisabled">
                                            <div style="padding: 3px 0;text-align: left;" v-if="currentRow.fhjmc !== '材料审查复核' && currentRow.fhjmc !== '方案制定'">
                                                <span>审查结论：</span>
                                                <a-radio-group v-model="item.ml.fywscyj" @change="singleOpinionChange($event,'fywscyj',item)" >
                                                    <a-radio value="通过">通过</a-radio>
                                                    <a-radio value="不通过">不通过</a-radio>
                                                    <a-radio value="整改后复查">整改后复查</a-radio>
                                                </a-radio-group>
                                            </div>
                                            <div v-if="!item.ml.fywscyj">
                                                <span>上一次技术审查情况：{{ item.ml.fbcscyj }}</span>
                                            </div>
                                            <div v-if="item.ml.fywscyj && (currentRow.fhjmc == '材料审查复核' || currentRow.fhjmc == '方案制定')">
                                                {{ item.ml.fywscyj }}
                                            </div>
                                            <handlingOpinionsVisual
                                            v-if="item.ml.fywscyj == '有意见' && currentRow.fhjmc !== '材料审查复核' && currentRow.fhjmc !== '方案制定'"
                                            :key="handlingOpinionsVisualKey"
                                            :parameterData="{opinion:item.ml.fscyj,valueData:{id:item.ml.id,valueKey:'fscyj'},opinionType:item.ml.fmlmc,formItemTitle:'审评意见'}" 
                                            @getInputOpinion="getInputOpinion" />
                                        </div>
                                        <div v-else>
                                            <div style="text-align: left;" >审查结论：{{item.ml.fywscyj?item.ml.fywscyj:'无'}}</div>
                                            <div style="text-align: left;">审评意见：{{ item.ml.fscyj?item.ml.fscyj:'无' }}</div>
                                        </div>
                                    </td>
                                </tr>
                                <tr v-for="(item,index) in JSSCBGList" :key="index" class="file-list-v-examination">
                                    <td :colspan="2">
                                        <div style="display: flex;justify-content: space-between;" >
                                            <a-tooltip placement="topRight">
                                                <template slot="title">
                                                    <span>{{ item.clmc }}</span>
                                                </template>
                                                <span class="directory-list-fmlmc" style="font-weight: 600;" >{{ item.clmc }}</span>
                                            </a-tooltip>
                                            <a-upload v-if="!currentRow.isDisabled" :beforeUpload="$event=>{return false}" :showUploadList="false" action="" @change="$event=>{singleUploadCahnge($event,item.clmc)}">
                                                <!-- && item.name !== '审评方案' -->
                                                <a-button
                                                size="small"
                                                class="ant-btn-green-l-ghost" 
                                                type="primary" ghost >上传</a-button>
                                            </a-upload>
                                        </div>
                                        
                                        <div class="file-for-box">
                                            <div class="file-for-v-1" v-for="(trem,tIndex) in item.wjList" :key="tIndex"
                                             :class="iframeData.id == trem.id?'select-file-list-examination':''" 
                                             @click="selectJSSCBG(trem)"
                                             >
                                                <a  class="name-fclmc-text">{{ trem.fwjxsmc+trem.fwjlx }}</a>
                                                <a-icon type="download" style="display: inline-block;font-size:16px;margin: 0 10px;color: #38f;" @click.top.prevent="downloadFiles(trem)"/>
                                                <a-icon v-if="!currentRow.isDisabled" style="display: inline-block;font-size:16px;color: #ed5565;" @click="deleteCheckDirectories({trem})" type="delete" />
                                                <!-- @click="downloadClick(trem)" -->
                                                <!-- <a-icon style="padding: 0 3px;" class="eye-icon-v" type="eye" @click="fetchAndAddWatermark(trem)" v-if="trem.fclmc.indexOf('.pdf') !== -1"/> -->
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div style="flex: 1;position: relative;">
                            <div id="wholeWatermarkId" ref="wholeWatermarkRef"></div>
                            <a-spin tip="正在加载中..." :spinning="iframeSpinning">
                                <div v-if="directoryList.length" >
                                    <div v-if="iframeData.fclmc">
                                        <span style="font-size: 16px;border: 2px solid #ff9200;color: #ff9200;padding: 0 3px;display: inline-block;border-radius: 15px;margin-left: 5px;margin-bottom: 5px;">{{ iframeData.fclmc }}</span>
                                    </div>
                                    <iframe :src="iframeSrc" width="100%" :height="currentRow.rightPreviewBoxH?currentRow.rightPreviewBoxH:rightPreviewBoxH"  v-if="iframeSrc"></iframe>
                                    <div v-else>
                                        <a-empty description="暂无文件或文件发生错误！"/>
                                    </div>
                                </div>
                            </a-spin>
                            <div v-if="!spinning && !directoryList.length" style="display: flex;justify-content: center;margin: 20px 0;">
                                <a-empty />
                            </div>
                            
                        </div>
                    </div>
                </a-spin>
            </div>
            <div v-show="activeKey == '申请信息'  || activeKey == '环节流转记录'" style="height: 100%;overflow: hidden;">
                <a-spin size="large" :spinning="modalSpinningPrice" tip="正在加载中...">
                    <eventSet
                        :key="eventSetKey" 
                        ref="examinationEventSetRef" 
                        @updatedSuccess="eventupdatedSuccess"
                    />
                </a-spin>
            </div>
        </div>
    </div>
</template>
<script>
import { 
    spcyqueryQyWjclml,
    spcyupdateMl,
    spcyoneKeyUpdateClmlBkck,
    spcyoneKeyUpdateClmlKck,
    spcyoneKeyUpdateClmlWsc,
    spcyoneKeyUpdateClmlYsc,
    spcydownloadQysqclFile,
    spcygetSummaryOpinionInScyj,
    spcyoneTouchYesScyj,
    spcyoneTouchNoScyj,
    spcydownloadQysqclById,
    spcyuploadSqsxFile,
    spcySqsxWjjlgetLocalFileById,
    spcySqsxWjjldeleteFileById,
    spcyjsspbgml,
 } from './service/index'
 import YchConstant from "@/api/YchConstant";
 import blobType from '@/common/blobType'
 import eventSet from '../taskAcceptance/eventSet.vue'
import CommpStep from '../../../../../components/commp-step/commpStep.vue';
import moment from 'moment'
import store from '@/store'
import { degrees, PDFDocument, rgb, StandardFonts } from 'pdf-lib'
export default {
    components:{
    eventSet,
    CommpStep
},
    props:{

    },
    data(){
        return{
            modalSpinningPrice:true,
            activeKey:'',
            directoryList:[],
            currentRow:{},
            directoryKey:null,
            auditStatus:'',
            visibleState:'',
            allOpinion:'',
            handlingOpinionsVisualKey:null,
            eventSetKey:null,
            allStatusKey:null,
            materialReviewExaminationKey:null,
            spinning:false,
            spinningKey:null,
            isFcljsqh:false,
            realname:store.getters.userInfo.realname,//获取用户名
            rightPreviewBoxH:window.innerHeight - 210 - 28,
            iframeSrc:'',
            iframeData:{},
            iframeSpinning:false,
            JSSCBGList:[],
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(row){
            //console.log('我是材料审查',row)
            this.currentRow = row
            this.currentRow.reserveBottom = row.reserveBottom?row.reserveBottom:0
            this.spinning = true
            spcyqueryQyWjclml({sqsxid:this.currentRow.sqsxid}).then(res=>{
                if(res.code == 200){
                    // this.$message.success(res.message)
                    //console.log(res.result)
                    this.directoryList = res.result
                    // 
                    res.result.forEach((item,index)=>{
                        if(item.wjList && item.wjList.length){
                            item.wjList.forEach(trem=>{
                                if(trem.fcljsqh == '1'){
                                    this.isFcljsqh = true
                                    return
                                }
                            })
                        }else{
                            this.isFcljsqh = false
                            return
                        }
                        if(!this.iframeData.id && item.wjList.length){
                            this.iframeData = {
                                ...item.wjList[0],
                                index,
                                tIndex:0
                            }
                            this.fetchAndAddWatermark(this.iframeData)
                        }
                    })
                    let fscztArr = []
                    let fkckztArr = []
                    let fscyjArr = []
                    res.result.forEach(item => {
                        fscztArr.push(item.ml.fsczt)
                        fkckztArr.push(item.ml.fkckzt)
                        fscyjArr.push(item.ml.fscyj)
                    });
                    
                    if(fscztArr.indexOf('已审核') == -1){
                        this.auditStatus = '未审核'
                    }else if(fscztArr.indexOf('已审核') !== -1 && fscztArr.indexOf('未审核') !== -1){
                        this.auditStatus = ''
                    }
                    if(fscztArr.indexOf('未审核') == -1) {
                        this.auditStatus = '已审核'
                    }else if(fscztArr.indexOf('已审核') !== -1 && fscztArr.indexOf('未审核') !== -1){
                        this.auditStatus = ''
                    }
                    if(fkckztArr.indexOf('允许') == -1) {
                        this.visibleState = '不允许'
                    }else if(fkckztArr.indexOf('允许') !== -1 && fkckztArr.indexOf('不允许') !== -1){
                        this.visibleState = ''
                    }
                    if(fkckztArr.indexOf('不允许') == -1) {
                        this.visibleState = '允许'
                    }else if(fkckztArr.indexOf('允许') !== -1 && fkckztArr.indexOf('不允许') !== -1){
                        this.visibleState = ''
                    }
                    if(fkckztArr.indexOf('无意见') == -1 && fkckztArr.indexOf('有意见') !== -1) {
                        this.allOpinion = '有意见'
                    }else if(fkckztArr.indexOf('有意见') !== -1 && fkckztArr.indexOf('无意见') !== -1){
                        this.allOpinion = ''
                    }else{
                        this.allOpinion = ''
                    }
                    if(fkckztArr.indexOf('有意见') == -1&& fkckztArr.indexOf('无意见') !== -1) {
                        this.allOpinion = '无意见'
                    }else if(fkckztArr.indexOf('有意见') !== -1 && fkckztArr.indexOf('无意见') !== -1){
                        this.allOpinion = ''
                    }else{
                        this.allOpinion = ''
                    }
                    
                }else{
                    this.$message.warning(res.message)
                }
                this.spinning = false
            })
            if(!row.noFirstLoad){
                this.activeKey = row.isActiveKey?row.isActiveKey:'材料审查'
                if(!row.isRefresh){
                    this.directoryKey = Date.now()
                    this.handlingOpinionsVisualKey = Date.now()
                    this.allStatusKey = Date.now()
                    this.materialReviewExaminationKey = Date.now()
                }
                
            }
            this.getJSSCBG()
        },
        getJSSCBG(){
            spcyjsspbgml({sqsxid:this.currentRow.sqsxid}).then(res=>{
                if(res.code == 200){
                    this.JSSCBGList = res.result
                }else{
                    this.JSSCBGList = []
                }
            })
        },
        singleUploadCahnge({file},val){
            var that = this
            const fileData = new FormData();
            fileData.append("file",file);
            fileData.append("sqsxid",this.currentRow.sqsxid);
            fileData.append("type",val);
            if(file.name.indexOf('.pdf') !== -1){
                spcyuploadSqsxFile(fileData).then(res => {
                    if(res.code !== 200){
                        that.$message.warning('请上传pdf文件或者联系管理员!')
                    }else{
                        that.getJSSCBG()
                        that.$message.success('上传成功')
                    }
                    
                })
            }else{
                this.$message.warning('请上传pdf文件')
            }
            
        },
        downloadFiles(val){//下载
            var that = this
            let param = { id:val.id,sqsxid:this.currentRow.sqsxid}
            spcySqsxWjjlgetLocalFileById(param).then((data) => {
                if (!data) {
                    that.$message.warning('文件下载失败')
                return
                }
                    let url = window.URL.createObjectURL(new Blob([data], { type: blobType.type[blobType.suffix.indexOf(val.fwjlx)] }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', val.fwjxsmc+val.fwjlx)
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
            })
        },
        async deleteCheckDirectories(row){
            var that = this
            this.$confirm({
                title:'您确认要删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                content:'',
                async onOk() {
                    let res = await spcySqsxWjjldeleteFileById({id:row.id})
                        if(res.code == 200){
                            await that.getJSSCBG()
                            
                            if(row.id == that.iframeData.id){
                                that.iframeSrc = ''
                                if(that.JSSCBGList.length && that.JSSCBGList[0].wjList && that.JSSCBGList[0].wjList.length){
                                    that.selectJSSCBG(that.JSSCBGList[0].wjList[0])
                                    that.iframeData = that.JSSCBGList[0].wjList[0]
                                }else{
                                    that.getDirectoryItem({idnex:0,tIndex:0})
                                }
                            }
                        }else{
                            that.$message.warning(res.message)
                        }
                },
                
            });
        },
        selectJSSCBG(trem){
            this.iframeSrc = bootConfig[process.env.NODE_ENV].locality_ApI+YchConstant.SPZX_SPCY+'/spcySqsxWjjl/getCrossLocalFile?id='+trem.id
            this.iframeData = trem
        },
        getList(){
            spcyqueryQyWjclml({sqsxid:this.currentRow.sqsxid}).then(res=>{
                if(res.code == 200){
                    this.directoryList = res.result
                }
            })
        },
        getDirectoryItem(row){
            this.directoryList.forEach((item,index)=>{
                if(row.index == index){
                    this.iframeData = {
                        ...item.wjList[row.tIndex],
                        index,
                        tIndex:row.tIndex
                    }
                    this.fetchAndAddWatermark(this.iframeData)
                    this.getList()
                }
            })
        },
        eventupdatedSuccess(){
            this.modalSpinningPrice = false
        },
        onChangeExamine(val){
            let data = {sqsxid:this.currentRow.sqsxid}
            if(val.target.value == '已审核'){
                spcyoneKeyUpdateClmlYsc(data).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                    this.getData({...this.currentRow,noFirstLoad:true})
                })
            }else if(val.target.value == '未审核'){
                spcyoneKeyUpdateClmlWsc(data).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                    this.getData({...this.currentRow,noFirstLoad:true})
                })
            }


        },
        onChangeVisible(val){
            //console.log(val)
            let data = {sqsxid:this.currentRow.sqsxid}
            if(val.target.value == '允许'){
                spcyoneKeyUpdateClmlKck(data).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                    this.getData({...this.currentRow,noFirstLoad:true})
                })
            }else if(val.target.value == '不允许'){
                spcyoneKeyUpdateClmlBkck(data).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                    this.getData({...this.currentRow,noFirstLoad:true})
                })
            }
            

        },
        onChangeOpinionVisible(val){
            let data = {sqsxid:this.currentRow.sqsxid}
            if(val.target.value == '有意见'){
                spcyoneTouchYesScyj(data).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                    this.getData({...this.currentRow,noFirstLoad:true})
                })
            }else if(val.target.value == '无意见'){
                spcyoneTouchNoScyj(data).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                    this.getData({...this.currentRow,noFirstLoad:true})
                })
            }
        },
        onChangeRowExamine(val,item){
            spcyupdateMl({fsczt:val.target.value,id:item.ml.id}).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                }else{
                    this.$message.warning(res.message)
                }
                this.getData({...this.currentRow,noFirstLoad:true})
            })
        },
        onChangeRowVisible(val,item){
            spcyupdateMl({fkckzt:val.target.value,id:item.ml.id}).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                }else{
                    this.$message.warning(res.message)
                }
                this.getData({...this.currentRow,noFirstLoad:true})
            })
        },
        tabPaneChange(val){
            if(val == '申请信息'  || val == '环节流转记录'){
                // this.eventSetKey = Date.now()
                this.$refs.examinationEventSetRef.getDatas({...this.currentRow,tabPaneActiveKey:val,noFirstLoad:true,borderisFalse:true})
                // this.$refs.examinationEventSetRef.$refs.dealWithRef.tabPaneChange(val)
                this.modalSpinningPrice = true
            }
        },
        viewClick(trem){
            //console.log(trem)
            window.open(
                bootConfig[process.env.NODE_ENV].locality_ApI+YchConstant.SPZX_SPCY+'/spcy/downloadQysqclFile?id='+trem.id
            )
            this.getData({...this.currentRow,noFirstLoad:true})
        },
        async fetchAndAddWatermark(trem) {
            this.iframeSpinning = true
            this.iframeSrc = ''
            // try {
            //     // 从接口获取PDF文件流
            //     if(!trem.id){
            //         return
                // }
                this.$nextTick(()=>{
                    this.$AddWatermarkHandle()
                })
                this.iframeSrc = bootConfig[process.env.NODE_ENV].locality_ApI + YchConstant.SPZX_SPCY + '/spcy/downloadQysqclFile?id='+trem.id
                this.iframeSpinning = false
                // this.iframeKey = Date.now()
                // const data = await spcydownloadQysqclFile({id:trem.id})
                // //console.log('我获取到了什么文件流？',data)
                // const realnameDate = this.realname+moment().format('YYYY年MM月DD日')
                // //console.log('水印文本',realnameDate)
                // this.previewPdfConstructor({
                //     blob: data,
                //     docTitle: 'window.open docTitle',
                //     isAddWatermark: true, // 是否需要添加水印
                //     watermark: { // watermark必填 里面可以不填
                //         type: 'canvas',
                //         text: realnameDate
                //     }
                // })
            // } catch (error) {
            //     this.iframeSpinning = false
            //     //console.log('Error fetching or adding watermark:', error);
            // }
        },
        previewPdfConstructor({ blob, docTitle, isAddWatermark = false, watermark: { type = 'text', text = 'WFT', image } }){
            try {
                const _self = this
                if(!blob) {
                    this.iframeSpinning = false
                    return console.error('[PDF Blob Is a required parameter]')
                }
                if(!isAddWatermark) { // 不添加水印
                    _self.preRightView(blob, docTitle)
                } else {
                    let bytes,imageType
                    if(type == 'image') {
                        if(!image) {
                        return console.error('["image" Is a required parameter]')
                        }
                        bytes = image.bytes
                        imageType = image.imageType
                    }
                    const map = {
                        // 'text': _self.addTextWatermark.bind(_self),
                        // 'image': _self.addImageWatermark.bind(_self),
                        'canvas': _self.addCanvasWatermark.bind(_self)
                    }
                    const pdfDoc =  PDFDocument.load(blob)
                    let params
                    if(type == 'text') params = { blob, pdfDoc, text, docTitle }
                    if(type == 'image') params = { blob, pdfDoc, bytes, imageType, docTitle }
                    if(type == 'canvas') params = { blob, pdfDoc, text, docTitle }
                    this.resultUrl = map[type](params)
                }
            } catch (error) {
                this.iframeSpinning = false
                //console.log('Error fetching or adding watermark:', error);
            }
        },
        async addCanvasWatermark({ blob, pdfDoc1, text, docTitle }) {
            try {
                const pdfDoc =  await PDFDocument.load(blob)
                // 旋转角度大小
                const rotateAngle = Math.PI / 4;
            
                // labels是要显示的水印文字，垂直排列
                let labels = new Array();
                labels.push(text);
            
                const pages = pdfDoc.getPages()
            
                const size = pages[0].getSize()
            
                let pageWidth = size.width
                let pageHeight = size.height

                //console.log('画布的宽高，',size.width,'-',size.height)
                let canvas = document.createElement('canvas');
                let canvasWidth = canvas.width = pageWidth;
                let canvasHeight = canvas.height = pageHeight;
            
                const context = canvas.getContext('2d');
                context.font = "15px Arial";
            
                // 先平移到画布中心
                context.translate(pageWidth / 2, pageHeight / 2 - 250);
                // 在绕画布逆方向旋转30度
                context.rotate(-rotateAngle);
                // 在还原画布的坐标中心
                context.translate(-pageWidth / 2, -pageHeight / 2);
            
                // 获取文本的最大长度
                let textWidth = Math.max(...labels.map(item => context.measureText(item).width));
            
                let lineHeight = 15, fontHeight = 12, positionY, i
                i = 0, positionY = 0
                while (positionY <= pageHeight) {
                positionY = positionY + lineHeight * 5
                i++
                }
                canvasWidth += Math.sin(rotateAngle) * (positionY + i * fontHeight) // 给canvas加上画布向左偏移的最大距离
                //console.log('给canvas加上画布向左偏移的最大距离',Math.sin(rotateAngle) * (positionY + i * fontHeight))
                canvasHeight = 2 * canvasHeight
                for (positionY = 0, i = 0; positionY <= canvasHeight; positionY = positionY + lineHeight * 5) {
                // 进行画布偏移是为了让画布旋转之后水印能够左对齐;
                context.translate(-(Math.sin(rotateAngle) * (positionY + i * fontHeight)), 0);
                for (let positionX = 0; positionX < canvasWidth; positionX += 1.5 * textWidth) {
                    let spacing = 0;
                    labels.forEach(item => {
                    context.fillText(item, positionX, positionY + spacing);        
                    context.fillStyle = 'rgba(0, 0, 0, .2)'; // 字体颜色
                    spacing = spacing + lineHeight;
                    })
                }
                context.translate(Math.sin(rotateAngle) * (positionY + i * fontHeight), 0);
                context.restore();
                i++
                }
                // 图片的base64编码路径
                let dataUrl = canvas.toDataURL('image/png');
                // 使用Xhr请求获取图片Blob
                let xhr = new XMLHttpRequest();
                xhr.open("get", dataUrl, true);
                xhr.responseType = "blob";
                xhr.onload = res => {
                const imgBlob = res.target.response
                // 获取Blob图片Buffer
                imgBlob.arrayBuffer().then(async buffer => {
                    const pngImage = await pdfDoc.embedPng(buffer)
                    for(let i = 0; i < pages.length; i++) {
                    pages[i].drawImage(pngImage)
                    }
                    // 序列化为字节
                    const pdfBytes = await pdfDoc.save()
                    this.preView(pdfBytes, docTitle)
                })
                }
                xhr.send();
            } catch (error) {
                this.iframeSpinning = false
                //console.log('Error fetching or adding watermark:', error);
            }
        },
        preView(stream, docTitle) {
            const blob = new Blob([stream], { type: 'application/pdf' });
            this.iframeSrc =  URL.createObjectURL(blob);
            this.getList()
            this.iframeSpinning = false
            // const URL = window.URL || window.webkitURL;
            // const href = URL.createObjectURL(new Blob([stream], { type: 'application/pdf;charset=utf-8' }))
            // const wo = window.open(href)
            // // 设置新打开的页签 document title
            // let timer = setInterval(() => {
            //   if(wo.closed) {
            //     clearInterval(timer)
            //   } else {
            //     wo.document.title = docTitle
            //   }
            // }, 500)
        },
        downloadClick(trem){
            //console.log(trem)
            let fwjlx = trem.fclmc.slice(trem.fclmc.lastIndexOf('.'))
            var that = this
            this.DownloadTemplateLoading = true
            var fileName = trem.fclmc
            let param = { id:trem.id}
            
            spcydownloadQysqclById(param).then((data) => {
                this.DownloadTemplateLoading = false
                if (!data) {
                    that.$message.warning('文件下载失败')
                    return
                }
                    let index = blobType.suffix.indexOf(fwjlx)
                    let url = window.URL.createObjectURL(new Blob([data], { type:blobType.type[index] }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName)
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
                    this.getData({...this.currentRow,noFirstLoad:true})
                // }
            })
        },
        getInputOpinion(val,data){
            //console.log(data)
            let datas = {id:data.id}
            datas[data.valueKey] = val
            spcyupdateMl(datas).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                }else{
                    this.$message.warning(res.message)
                }
                this.getData({...this.currentRow,noFirstLoad:true})
            })
        },
        singleOpinionChange(val,name,item){
            //console.log(item)
            let datas = {id:item.ml.id}
            datas[name] = val.target.value
            spcyupdateMl(datas).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                }else{
                    this.$message.warning(res.message)
                }
                this.getData({...this.currentRow,noFirstLoad:true})
            })
        }
    }
}
</script>
<style lang="less">
//1
.material-review-examination{
    width: 100%;
    
    padding: 2px 5px 5px 5px;
    overflow-y: hidden;
    background-color: #fff;
    .material-review-tabs{
        // width: 100%;
        padding: 0 5px;
        background-color: #fff;
        position: relative;
        // top: 48px;
        top: 0;
        right: 0;
        // margin:0 10px;
        font-size: 20px !important;
        font-weight: 600 !important;
        .ant-tabs-bar{
            margin: 0;
        }
        .ant-tabs-nav .ant-tabs-tab{
            padding-top: 5px;
            padding-bottom: 5px;
            margin-right: 10px;
        }
        .ant-tabs-nav-container{
            height: 50px !important;
        }
        .ant-tabs-nav-scroll{
            padding-top: 10px;
            padding-left: 10px;
        }
    }
    .ant-tabs-tab-active{
        font-size: 16px;
        font-weight: 600 !important;
    }
    .ant-tabs-tab{
        font-size: 16px;
        font-weight: 600 !important;
        line-height: 28px !important;
        border-radius: 10px 10px 0 0 !important;
    }
    .ant-tabs-tab-active{
        background-color: #5ca3e5 !important;
        color: #fff !important;
        border-color: #5ca3e5 !important;
        box-shadow: 0px 0px 12px 0px #5ca3e5;
    }
    .material-review-content{
        margin-top: 10px;
        height: calc(100vh - 210px);
        overflow-y: hidden;
        
    }
}
//2
.material-review-examination{
    .review-table{
        padding-bottom: 3px;
        th{
            text-align: center;
            padding: 10px;
        }
        td{
            padding: 10px;
        }
    }
    .file-list-v-examination{
        .file-for-box{
            // display: flex;
            // flex-wrap: wrap;
        }
        .file-for-v-1{
            border-radius: 2px;
            border: 1px solid #d9d9d9;
            border-radius: 15px;
            // display: flex;
            // flex-direction: row;
            // justify-content: space-between;
            // align-items:center;
            padding: 5px;
            margin: 5px 0;
            .file-icon-box{
                margin-right:5px;
                display: flex;
                justify-content: space-evenly;
                .file-icon-v{
                    font-size: 42px;
                    color: rgb(24, 144, 255);
                    padding: 7px;
                }
                // .left-box{
                //     width: 28px;
                // }
                .right-box{
                    display: flex;
                    // flex-direction: column;
                    justify-content: space-evenly;
                    align-items: center;
                    padding-bottom: 2px;
                    width:35px;
                    
                }
                
            }
            .eye-icon-v{
                display:inline-block;
                padding-left: 30px;
                font-size: 18px;
                color: #1ab394;
            }
            .name-fclmc-text{
                // height: 60px;
                // text-align: left;
                // display:inline-block;
                // text-overflow: -o-ellipsis-lastline;
                // overflow: hidden;
                // text-overflow: ellipsis;
                // display: -webkit-box;
                // // display: flex;
                // // flex-direction: column;
                // // justify-content: center;
                // -webkit-line-clamp: 3;
                // line-clamp: 3;
                // -webkit-box-orient: vertical;
                font-size: 14px;
            }
        }
        .directory-list-fmlmc{
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 10px;
            font-weight: 600;
        }
        .select-file-list-examination{
            // background-color: #38f;
            // a{
            //     color: #fff;
            // }
            background-image: linear-gradient(to bottom, #e7f3ff, #fff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff);
            background-size: 100% 100% !important;
            border: 2px solid #ff9200;
        }
        
    }
    
}
.processing-content-right-v{
    margin-left: 150px;
    background-color: #fff;
}
</style>